import highlight from '@bytemd/plugin-highlight'
import 'bytemd/dist/index.min.css' //引入样式
import { useEffect, useState } from 'react'
import zhHans from "bytemd/lib/locales/zh_Hans.json";//引入中文包
import { Editor } from '@bytemd/react';
import style from './style.module.less'
import { Button, Input, message, Popconfirm } from 'antd';
import { DoubleLeftOutlined } from '@ant-design/icons';
import Tags from '../../components/Tags';
import gfm from '@bytemd/plugin-gfm';
import mediumZoom from "@bytemd/plugin-medium-zoom";
import gemoji from "@bytemd/plugin-gemoji";
import { getArticle, putArticle, upload } from '../../services/api';
import Title from 'antd/lib/typography/Title';
import { Link, useParams } from 'react-router-dom';
import Banner from '../../components/Banner';

const plugins = [
    gfm(),
    mediumZoom(),
    gemoji(),
    highlight() //代码高亮
]
interface Params {
    id: string
}
function Edit() {
    const { id } = useParams<Params>()
    const [value, setValue] = useState('')
    const [visible, setVisible] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [title, setTitle] = useState('')
    const [subTitle, setSubTitle] = useState(' ')
    const [tagsChild, setTagsChild] = useState<string[]>([])
    const [banner, setBanner] = useState<string[]>([])
    //初始化
    useEffect(() => {
        getArticle(id).then((res) => {
            if (res.data) {
                setTitle(res.data.info.title)
                setSubTitle(res.data.info.subTitle)
                setValue(res.data.info.content)
            }
        })
    }, [id])
    //确认修改框
    const showPopconfirm = () => {
        setVisible(true);
    };
    //修改
    const handleOk = () => {
        setConfirmLoading(true);
        putArticle(id, {
            title: title,
            content: value,
            tags: tagsChild,
            banner: banner,
            subTitle: subTitle
        }).then((res)=>{
            if(res.stat==='ok'){
                setVisible(false);
                setConfirmLoading(false);
                window.location.href="/Person"
            }else{
                message.error('添加失败')
            }
        })
    };
    const handleCancel = () => {
        setVisible(false);
    };
    const getTags = (tags: string[]) => {
        setTagsChild(tags)
    }
    //获取横幅
    const getBanner = (banner: string[]) => {
        setBanner(banner)
    }
    return (
        <div className={style.wrap}>
            <div>
                <div>
                    <Title style={{ display: 'inline' }}>
                        <input type="text"
                            maxLength={15}
                            placeholder="标题"
                            className={style.title}
                            value={title}
                            onChange={(e) => setTitle(e.target.value)}
                        />
                    </Title>
                    <Banner id={id} getBanner={getBanner}></Banner>
                </div>
                <Input
                    placeholder="副标题"
                    bordered={false}
                    maxLength={40}
                    style={{ paddingLeft: 5, paddingTop: 0 }}
                    value={subTitle}
                    onChange={(e) => { setSubTitle(e.target.value) }}
                />
            </div>
            <div><span>标签:</span>
                <Tags getTags={getTags} id={id} />
            </div>
            <Editor
                locale={zhHans} //语言
                value={value}   //内部的值
                plugins={plugins}  //插件
                onChange={(v) => {  //动态修改值
                    setValue(v)
                }}
                uploadImages={async (files) => {
                    let formData = new FormData();
                    formData.append("imgs", files[0]);
                    let key = (await upload(formData)).data
                    return [{
                        url: '/api/file/preview/' + key,
                        type: "image"
                    }]
                }}
            />
            <Popconfirm
                title="是否确认修改?"
                visible={visible}
                onConfirm={handleOk}
                okButtonProps={{ loading: confirmLoading }}
                onCancel={handleCancel}
            >
                <Button onClick={showPopconfirm} className={style.btn}>完成编辑</Button>
            </Popconfirm>
            <Link to="/Person" className={style.return}><DoubleLeftOutlined />返回</Link>
        </div>
    )
}
export default Edit